<template>
  <div>
    <div class="v-tabs" style="margin-top:40px">
      <div class="tabsTitle">
        <div class="title">
          <div class="item" :class="{ active: activeIndex==index&&activeIndex==0,activeOther:activeIndex==index&&activeIndex>0,noactive:activeIndex!==index}" v-for="(item,index) in editableTabs" :key="index" @click="handelClickTitle(item,index)" @dblclick="dbahanderClickTitle(item,index)">
            <span v-show="dbActiveIndex!==index">{{item.name}}</span>
            <span v-show="dbActiveIndex==index">
              <el-input v-model="item.name" maxlength="8" placeholder="" @focus="editTitle(item,index)" @blur="comfirTitle(item,index)"></el-input>
            </span>
            <i class="el-icon-close" v-if="activeIndex==index&&!item.isFixed&&dbActiveIndex!==index&&activeIndex!==0" @click="delTabs(item,index)" style="margin-left:10px"></i>
          </div>
        </div>
        <div class="addBtn">
          <el-button type="text" @click="addInfo">新增维护信息</el-button>
        </div>
      </div>
      <div class="tabsContne" @click="handerClickTab">
        <div v-for="(item,idx) in editableTabs" :key="idx">
          <div v-if="activeIndex==idx">
            <slot name="bin" :row="editableTabs[idx]"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    editableTabs: {
      type: Array
    },
    voidIndex: {
      type: Object
    }
  },
  data () {
    return {
      dbActiveIndex: null,
      activeIndex: 0,
    }
  },
  watch: {
    voidIndex (val) {
      this.activeIndex = val.idx
    },
  },
  methods: {
    rightClick () {
      console.log('右键')
    },
    tabClick (tab, event) {
      console.log('tabClick', tab, event)
    },
    handelClickTitle (item, index) {
      this.activeIndex = index
    },
    dbahanderClickTitle (item, index) {
      console.log('双击', item, index)
      if (!item.isFixed & index !== 0) {
        this.dbActiveIndex = index
      }
    },
    addInfo () {
      if (this.editableTabs.length > 5) {
        this.$message({
          showClose: true,
          message: '最多新增5个标签',
          type: 'warning'
        });
        return false
      }
      this.editableTabs.push({
        name: `维护信息${this.editableTabs.length}`,
        isFixed: false,
        formInfo: {
          inprocess_num: 1,
          inprocess_unit: '日',
          inprocess_code: 'X050100901',
          upkeep_num: 1,
          upkeep_unit: '日',
          upkeep_code: 'X050100904',
          maintain_num: 1,
          maintain_unit: '日',
          maintain_code: '',
          unitOfTime: 10,
          upkeepContent: `养护的内容${this.editableTabs.length}`,
          inprocessContent: `巡检的内容${this.editableTabs.length}`
        }
      })
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].isFixed) {
          var endTab = this.editableTabs[i]
          this.editableTabs.splice(i, 1)
          this.editableTabs.push(endTab)
          break
        }
      }
    },
    editTitle (item, index) {

    },
    comfirTitle (item, index) {
      console.log(item, index)
      this.editableTabs[index] = item
      this.dbActiveIndex = null
    },
    handerClickTab () {
      this.dbActiveIndex = null
    },
    delTabs (item, index) {
      this.$confirm('确认删除该项, 是否继续?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.editableTabs.splice(index, 1)
      }).catch(() => {

      });
    }
  }
}
</script>

<style lang="stylus">
.customTabs {
  position relative
  .addBtn {
    position absolute
    right 5px
    top 2px
  }
}
.v-tabs {
  display flex
  flex-direction column
  border 1px solid #DCDFE6
  box-shadow 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04)
  .tabsTitle {
    display flex
    flex-direction row
    align-items center
    height 50px
    background #F5F7FA
    .title {
      display flex
      flex-direction row
      align-items center
      height 100%
      .item {
        padding 0 5px
        display flex
        min-width 150px
        height 100%
        align-items center
        justify-content center
        cursor pointer
        .el-input__inner {
          width 130px
        }
      }
      .active {
        background #ffffff
        border-right 1px solid #DCDFE6
      }
      .noactive {
        border-bottom 1px solid #DCDFE6
      }
      .activeOther {
        background #ffffff
        border-right 1px solid #DCDFE6
        border-left 1px solid #DCDFE6
      }
    }
    .addBtn {
      display flex
      flex 1
      height 100%
      justify-content flex-end
      align-items center
      border-bottom 1px solid #DCDFE6
      padding-right 10px
    }
  }
  .tabsContne {
    padding 20px
  }
}
</style>